<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>11.高阶函数_函数柯里化</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        /* 此处一定要写babel */
        /********
         *  高阶函数:
         * 如果一个函数符合下面的2个规范中的任何一个,那该函数就是高阶函数.
         * 1,若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数.
         * 2,若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数.
         * 常见的高阶函数有:定时器函数,Promise函数 ,数组常见的一些方法 如arr. map
         * 函数发柯里化: 通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式.
         * 
         * 
         * ****************/ 
			//1.创建组件
			class Login extends React.Component {
				//初始化状态
				state = {
					username: '',
					password: '',
				}
				
				//保存表单数据到状态中
				saveFormData = (dataType,data) => {
                    // console.log("222222222222222",type,data)
					return (event)=>{
                    //   console.log("first",dataType,event.target.value)  
                        this.setState({
                            [dataType]:event.target.value
                        })
                    }
				}
				handleSubmit = (event) => {
					//阻止表单提交默认刷新页面的行为
					event.preventDefault()
					const { username, password } = this.state
					// const {username,password} = this
					alert(`输入的用户名是${username},我输入的密码是${password}`)
				}

				render() {
					return (
						<form
							action="http://www.atguigu.com"
							onSubmit={this.handleSubmit}
						>
							用户名:
							<input
								onChange={this.saveFormData('username')}
								type="text"
								name="username"
							/>
							密码:
							<input
								onChange={this.saveFormData('password')}
								type="password"
								name="password"
							/>
							<button>登录</button>
						</form>
					)
				}
			}
			//2.渲染虚拟DOM到页面
			ReactDOM.render(<Login />, document.getElementById('test'))
		</script>
</body>

</html>